<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>相册详情</title>
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/mainpage.css">
		<link rel="stylesheet" type="text/css" href="css/mainpage_header.css">
		<link rel="stylesheet" type="text/css" href="css/album.css">
		<meta name="Description" content="666的博客,心随你动!" />
		<script type="text/javascript">
			function popBox(id) {
				var popBox = document.getElementById(id);
				var popLayer = document.getElementById('popLayer');

				popLayer.style.width = document.body.scrollWidth + "px";
				popLayer.style.height = document.body.scrollHeight + "px";

				popLayer.style.display = "block";
				popBox.style.display = "block";
			}


			function closeBox(id) {
				var popBox = document.getElementById(id);
				var popLayer = document.getElementById('popLayer');

				popLayer.style.display = "none";
				popBox.style.display = "none";

			}
		</script>


	</head>
	<body>
		<div id="wrapper">
			<header>
				<div id="header-text">
					<h1>游呢娃子的博客</h1>
					<div id="signature">这个人很懒，什么都没有说。</div>
				</div>
				<div class="login">
					您好，请 <a href="sign_in.html">登录</a>
				</div>
			</header>
			<nav>
				<ul>
					<li class="first-page"><a href="#">主页</a></li>
					<li><a href="#">日志</a></li>
					<li><a href="#">相册</a></li>
					<li><a href="#">留言板</a></li>
					<li><a href="#">我的访客</a></li>
					<input type="text" id="search" value="文章搜索..." onfocus="if (value =='文章搜索...'){value =''}" onblur="if (value ==''){value='文章搜索...'}">
					<button type="button"></button>
				</ul>

			</nav>
			<div id="container">
				<div class="flytext">
					<img src="img/widespread.png" />
					<marquee behavior="scroll" direction="left">
						这是用来测试的无意义的一句话啦啦啦。
					</marquee>
				</div>
				<div class="subalbum">
					<div class="title">
						<span>相册详情</span>
					</div>
					<div class="album-content">
						<div class="album-header">
							<div class="cover"><img src="img/lengtu3.jpg" class="cover"></div>
							<div class="album-inf">
								<div class="album-title">我的相册</div>
								<button type="button" class="add-photos" onclick="popBox('popBox-addphoto')">
									添加照片
								</button>
							</div>
							<div class="album-stat">
								<div class="album-comment">
									<div class="comment-title">评论</div>
									<div class="comment-count">0</div>
								</div>
								<div class="album-like">
									<div class="like-title">赞</div>
									<div class="like-count">0</div>
								</div>
							</div>
						</div>
						<ul class="photo-list">
							<li class="single-photo-inf" id="single-photo-inf-0" onmouseover="over(this.id)" onmouseout="out(this.id)">
								<a href="#">
									<img class="single-photo" src="img/lengtu.jpg" width="150" height="150" onclick="popBox('popBox')">
								</a>
								<div class="photo-operation" id="photo-operation-0">
									<img class="like-icon" src="img/good_32px.png">
									<img class="comment-icon" src="img/comment_32px.png" onclick="popBox('popBox-comment')">
									<span class="photo-reblog">转载</span>
								</div>
								<div class="photo-description">冷兔宝宝超可爱</div>
							</li>

						</ul>
					</div>
					<!-- 换页 -->
					<div class="pagi">
						<ul class="pagination">
							<li><a href="#">«</a></li>
							<li><a href="#" class="active">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">6</a></li>
							<li><a href="#">7</a></li>
							<li><a href="#">»</a></li>
						</ul>
					</div>
				</div>

			</div>
			<footer>&copy;2019-2030 啦啦啦</footer>
		</div>
		<div id="popLayer">
		</div>

		<div id="popBox-comment">
			<div class="close2"><a href="javascript:void(0)" onclick="closeBox('popBox-comment')"><img src="img/close-popbox.png"></a></div>
			<div class="title"><span>添加评论</span></div>
			<div class="write-comment">
				<textarea rows="5" cols="69" id="write-textarea"></textarea>
			</div>
			<button type="submit" class="photo-comment-button">评论</button>
		</div>
		<div id="popBox-addphoto">
			<div class="close3"><a href="javascript:void(0)" onclick="closeBox('popBox-addphoto')"><img src="img/close-popbox.png"></a></div>
			<div class="title"><span>添加照片</span></div>
			<p id="photo-title-p">
				<label for="photo-title" class="photo-title-label"> 照片标题： </label>
				<input class="textareas" id="photo-title" name="photo-title" required="required" type="text" />
			</p>
			<p id="submit-photo-p">
				<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
			</p>
			<p id="submit-button-p">
				<input type="submit" id="submit-photo" value="上传" />
			</p>
		</div>
		<div id="popBox">
			<div class="close"><a href="javascript:void(0)" onclick="closeBox('popBox')"><img src="img/close-popbox.png"></a></div>
			<div class="photoinf">
				<img src="img/lengtu.jpg">
				<div class="photo-comment-list">
					<div class="title">
						评论列表
					</div>
					<div class="single-comment" id="single-comment-0">
						<div class="personal-commentinf">
							<img class="personal-icon" src="img/lengtu3.jpg">
							<div class="personal-name">
								<a href="#">鲲鲲</a>
							</div>
						</div>
						<div class="personal-comment">
							<div class="floor">
								<span id="floor-count"><span>1</span>楼</span>
								<span id="comment-time">评论时间：<span>2019-6-15 15:43:24</span></span>
							</div>
							<div class="comment-time-content">
								鸡你太美！
							</div>
						</div>
						<div class="comment-opration">
							<div class="reply">
								<span>回复</span>
							</div>
							<div class="delete">
								<span>删除</span>
							</div>
						</div>
					</div>
					<div class="more">
						<button type="button" id="moreclick">点击加载更多...</button>
					</div>
				</div>

			</div>

		</div>
	</body>
	<script type="text/javascript">
		var sourceNode = document.getElementById("single-photo-inf-0");
		for (var i = 1; i < 10; i++) {
			var clonedNode = sourceNode.cloneNode(true);
			clonedNode.setAttribute("id", "single-photo-inf-" + i);
			clonedNode.childNodes[3].id = "photo-operation-" + i;
			sourceNode.parentNode.appendChild(clonedNode);
		}


		function over(id) {
			var index = id.substr(id.length - 1, 1);
			document.getElementById("photo-operation-" + index).style.visibility = "visible";
		}

		function out(id) {
			var index = id.substr(id.length - 1, 1);
			document.getElementById("photo-operation-" + index).style.visibility = "hidden";
		}
	</script>
</html>
